<template>


	<u-modal :show="show" :closeOnClickOverlay="true" @close="onClose" confirmText="保存图片" @confirm="saveCanvas">
		<view class="content">
			<canvas  canvas-id="drawcanvas" style="width: 300px; height: 400px;"></canvas>
		</view>

	</u-modal>

</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance 
	} from 'vue';
	import {
		shareData
	} from '../common/api';
	import {
		func
	} from '../uni_modules/uview-plus/libs/function/test';

	const props = defineProps({
		good: {
			type: Object
		},
		show: {
			type: Boolean,
			default: false
		}
	});
	const emits = defineEmits(["update:show"])
	const user = ref(null); //当前用户
	const headImg = ref(null); //分享人的头像图片
	const goodLogo = ref(null); //商品图片
	const qrcodeImg = ref(null); //小程序分享的二维码调用后台接口生成
	const cnode = ref(null);
	var ctx ; //画布canvas的实例
	//点击遮罩层关闭
	function onClose() { 
		emits("update:show", false);
	}
	onMounted(() => {		
		//因为是在组件内部定义canvas，根据官方文档需要获取组件实例
		const instance = getCurrentInstance();
		//小程序只支持在onready里面获取，在组件里是onmounted获取实例
		 ctx  = uni.createCanvasContext('drawcanvas', instance);
		shareData().then((ret) => {		 
			user.value = ret;
			headImg.value = ret.head_img;
			qrcodeImg.value = ret.qrcodeImg;
			downAllImg()
		})
	})


	//绘制画布
	function canvasDrawImage() {		
		//绘制头像
		if(headImg.value.path)
		ctx.drawImage(headImg.value.path, 10, 10, 48, 48);
		//绘制顶部姓名电话 
		ctx.setFontSize(16);
		ctx.setFillStyle('black');
		ctx.setTextAlign('left');
		ctx.fillText(user.value.nickname, 68, 27);
		ctx.stroke();
		//绘制头像昵称下的描述
		ctx.setFontSize(14);
		ctx.setFillStyle('#898989');
		ctx.setTextAlign('left');
		ctx.fillText(user.value.desc, 68, 52);
		ctx.stroke();
		//绘制圆角商品图片，暂时没有解决圆角后图片有黑边，弃用
		//drawRoundedImage(ctx,goodLogo.value.path, 6, 80, 287, 150,10)
		//采用默认方法绘制商品图片
		if(goodLogo.value.path)
		ctx.drawImage(goodLogo.value.path, 6, 80, 287, 150)
		//价格
		ctx.setFillStyle('#F78D1F');
		ctx.setTextAlign('left');
		ctx.setFontSize(12);
		ctx.fillText('¥', 10, 260);
		ctx.setFontSize(24);
		ctx.fillText(props.good.price_label, 20, 260);
		let price = props.good.price_label ?? '';
		let width = price.length * 25;
		ctx.setFontSize(14);
		ctx.fillText(props.good.price_prefx, width, 260);

		//绘制商品标题
		ctx.setFillStyle('black');
		ctx.setTextAlign('left');
		//标题字数换行控制
		let title = props.good.title.slice(0, 8);
		let title2 = props.good.title.slice(8, 16);
		let title3 = props.good.title.slice(17, 26);
		ctx.setFontSize(16);
		ctx.fillText(title, 10, 340);
		ctx.fillText(title2, 10, 360);
		ctx.fillText(title3, 10, 380);

		ctx.stroke();

		//二维码
		if(qrcodeImg.value.path)
		ctx.drawImage(qrcodeImg.value.path, 160, 260, 140, 140)
		//绘制
		ctx.draw();
		//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

	} 
	 

	function saveCanvas() {
		//先把canvas 保存到零时图片
		uni.canvasToTempFilePath({
			canvasId: 'drawcanvas',
			success: function(res) {

				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success(res) {
						uni.$u.toast('图片已保存到相册，赶紧晒一下吧~');
						emits("update:show", false)
					},
					fail() {
						uni.$u.toast('H5请截图保存')
						emits("update:show", false)
					}
				})

			},
			fail() {
				uni.$u.toast('不支持H5保存图片');
				emits("update:show", false)
			}
		});

	}

	function downAllImg() {
		uni.showLoading({
			title: '加载中'
		})
		Promise.all([downGoodLogo(), downHeadImg(), downQrcodeImg()]).then(([a, b, c]) => {
			goodLogo.value = a;
			headImg.value = b;
			qrcodeImg.value = c;
			uni.hideLoading();
			canvasDrawImage();
			console.log(qrcodeImg.value.path)
		}, () => {
			uni.hideLoading();
			emits("update:show", false);
			uni.$u.toast('分享图片下载失败')
		})
	}

	function downQrcodeImg() {
		return new Promise((resolve, reject) => {
			uni.getImageInfo({
				src: qrcodeImg.value,
				success(res) {
					resolve(res)
				},
				fail() {
					reject()
				}
			})
		})
	}

	function downHeadImg() {
		 
		return new Promise(resolve => {
			uni.getImageInfo({
				src: headImg.value,
				success(res) {
					resolve(res)
				}
			})
		})
	}

	function downGoodLogo() {
		return new Promise(resolve => {
			uni.getImageInfo({
				src: props.good.logo,
				success(res) {
					//测试用本地图片
					//resolve("./static/goodLogo.jpg")
					resolve(res)
				}
			})
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-left: -55px;
		margin-right: -55px;
	}
</style>